<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <el-alert v-if="isShowAlert" title="更新成功" type="success"> </el-alert>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      label-position="left"
      class="demo-ruleForm"
    >
      <el-form-item label="电子邮件">
        <p>
          {{ ruleForm.Email }}<span @click="handleEMail">编辑</span>仅自己可见
        </p>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input type="text" v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="个人说明" prop="introduct">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          :maxlength="200"
          v-model="ruleForm.introduct"
        >
        </el-input>
        <span>可选，个人说明不超过200个字符</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存设置</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import { updateUserInfo } from "@/api/api";
import {mapState,mapMutations} from "vuex"
export default {
  data() {
    return {
      isShowAlert: false,
      ruleForm: {
        eMail: "",
        nickname: "",
        introduct: "",
      },
      rules: {
        nickname: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("昵称不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  created() {
    this.ruleForm = this.userInfo
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$api.updateUserInfo(this.ruleForm);
          // console.log(res);
          if (res.code !== 200) return false;
          this.isShowAlert = true;
          this.ruleForm=res.data;
          this.setUserInfo({value:res.data,app:this})
          location.reload()
        } else {
          return false;
        }
      });
    },
    handleEMail() {
      //跳转到邮箱编辑页面
      this.$router.push("/set/bind");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-alert {
  padding: 12px 15px;
  margin-bottom: 20px;
  .el-alert__content {
    .el-alert__title,
    .el-alert__closebtn {
      font-size: 16px;
    }
  }
}
/deep/.el-form {
  .el-input__suffix {
    display: none;
  }
}
</style>